/*

svg noise background?
3d gallery of photos?
starfield?
on earth, then on moon?

score counter throbs at x00

*/

body {
    transition: all 10s linear;
    background-size: cover;
}

body.sky {
    background-color: lightskyblue;
    background-image: url(media/tile_clouds.svg);
    @media (prefers-color-scheme: dark) {
        background-color: midnightblue;
        background-blend-mode: soft-light;
    }
    background-size: 2e3px;
    animation-name:            background-north-2e3px, background-east-2e3px;
    animation-duration:        180s,                   calc(pi * 130s);
    animation-iteration-count: infinite,               infinite;
    animation-timing-function: linear,                 linear;
    animation-direction:       linear,                 linear;
}
body.water {
    background-color: lightseagreen;
    background-image: url(media/tile_water.svg);
    @media (prefers-color-scheme: dark) {
        background-color: navy;
    }
    background-size: 8e3px;
    animation-name:            background-north-8e3px, background-east-8e3px;
    animation-duration:        80s,                    calc(pi * 40s);
    animation-iteration-count: infinite,               infinite;
    animation-timing-function: linear,                 ease-in-out;
    animation-direction:       normal,                 alternate;
}


html {
    --periapsis: -9rem;
    --initial-guessbox-height: 1.5em;
    --guessbox-yscale: 1;
    --extraneity: 0;
}
html.extraneous {
    --extraniety: 1;
    --guessbox-yscale: 9;
}

solar-system {
    display: block;
    Vtransform-style: preserve-3d;
    Vperspective: 12em;
    height: calc((var(--initial-guessbox-height) + 0.4em ) * (var(--guessbox-yscale)));
    vvborder-style:solid;
    transition: all 2s ease-out;
    Voverflow-x: clip;
    margin-left: 0px; margin-right: 0px;
}

#belt {
    display: none;
    transform-style: preserve-3d;
    animation-name: tilt;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    position: absolute; width: 100%;
}
@keyframes tilt {
    0% { rotate: 10deg; }
    to { rotate: -9deg; }
}
html.extraneous #belt {
    display: block;
    transform-style: preserve-3d;
    rotate: 5deg;
    text-align: center;
    position: relative;
    height: 0;
    bottom: calc( -50% + 1em);
    VVborder-style: dotted;
}
#orbiter {
    animation-name: orbit;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform: rotateY(0turn) translateZ(var(--periapsis));
    display: inline-block;
    width: min-content;
    font-size: 2em;
    pointer-events: none;
    position: relative;
    & #predator {
        position: absolute;
        top: -200%;
        right: -50px;
    }
}
#kettle {
    Vanimation-name: swoop;
    animation-duration: 8s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    position: absolute;
    left: 0px;
    Vborder-style: dotted;
    text-align: left;
    & #predator { width: 100px; }
    &.swooping { animation-name: swoop; }
    &:not(.swooping) #predator { display: none; }
    #prey { width: 40px; }
    img {
        position: absolute;
        max-width: unset;
    }
    
}

@keyframes swoop {
    from {
        width: 2000px;
        height: 1000px;
        left: 0px;
    }
    50% {
        width: 1rem;
        height: 35px; top: 0em;
        left: 0px;
    }
    99% {
        width: 1rem;
        height: 35px; top: -1000px;
        left: -2000px;
        opacity: 1;
    }
    to {
        width: 1rem;
        height: 35px; top: -1000px;
        left: -2000px;
        opacity: 0;
    }
}

@keyframes orbit { to { transform: rotateY(1turn) translateZ(var(--periapsis)); } }

#guessbox {
}    

html.extraneous #guessbox {
    height: var(--initial-guessbox-height);
    Aopacity:0.9;
    scale: 1 var(--guessbox-yscale);
    transform: rotateX(5deg);
    /*margin-bottom: calc(var(--initial-height) * ( var(--yscale) ));*/
    transition: all 2s ease-out;
    transform-origin: top center;
}